<template>
	<view class="content">
		<scroll-view scroll-y>
			<view style="height: 30rpx; width: 100%;"></view>
			<view class="chat" v-for="i in chat">
				<view class="time">{{ "8.00" }}</view>
				<view class="chat-box" v-if="i.role === 'you'">
					<image src="../../static/index/88D5EC7E-E59C-483C-B8D6-FC8C237FDC3A_1_105_c.jpeg"></image>
					<view class="chatInfo">
						<view v-for="(i,key) in lineWrapTool(i.msg)">
							<text>{{ i }}</text>
							<br>
						</view>
					</view>
				</view>
				<view class="chat-box-me" v-if="i.role === 'me'">
					<image src="../../static/index/88D5EC7E-E59C-483C-B8D6-FC8C237FDC3A_1_105_c.jpeg"></image>
					<view class="chatInfo">
						<view v-for="(i,key) in lineWrapTool(i.msg)">
							<text>{{ i }}</text>
							<br>
						</view>
					</view>
				</view>
			</view>
			<view></view>
			<view class="topBox">
				<view class="topBox-Box">
					<image src="/static/Chatpage/Voice.png" />
					<input v-model="info" />
					<view class="submit">发送</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: '',
				chat: [{
						role: 'me',
						msg: '你好呀'
					},
					{
						role: 'you',
						msg: 'hello!'
					},
				]
			}
		},
		components: {

		},
		methods: {
			//str @String
			lineWrapTool(str) {
				let text = [];
				let temp = '';
				let currentLength = 0;
				for (let i = 0; i < str.length; i++) {
					let char = str.charAt(i);
					if (/[\u4E00-\u9FA5]/.test(char)) {
						// 中文字符，占2个位置
						currentLength += 2;
					} else {
						// 其他字符，占1个位置
						currentLength += 1;
					}
					temp += char;
					if (currentLength >= 26) {
						text.push(temp);
						temp = '';
						currentLength = 0;
					}
				}
				// 别忘记添加最后一段未满26位置的字符串
				if (temp.length > 0) {
					text.push(temp);
				}
				return text;
			}
		},
		mounted() {

		}
	}
</script>

<style>
	@import "ChatPage.css";
</style>